<template>
  <div class="champion-detail">
    <!-- 添加回到顶部按钮 -->
    <el-backtop :right="20" :bottom="20" target=".champion-detail">
      <el-icon><ArrowUpBold /></el-icon>
    </el-backtop>
    
    <!-- 修改头部控制区域的结构和样式 -->
    <div class="header-controls">
      <div class="left-controls">
        <el-button 
          type="primary" 
          size="small" 
          @click="$emit('back')"
          :icon="ArrowLeft">
          返回列表
        </el-button>
      </div>
      
      <div class="right-controls">
        <!-- 添加模式选择 -->
        <el-select 
          v-model="selectedMode" 
          placeholder="选择模式" 
          @change="handleFilterChange"
          size="small"
          style="width: 120px;">
          <el-option label="单双排位" value="ranked" />
          <el-option label="极地大乱斗" value="aram" />
        </el-select>

        <!-- 添加服务器选择 -->
        <el-select 
          v-model="selectedRegion" 
          placeholder="选择服务器" 
          @change="handleFilterChange"
          size="small"
          style="width: 120px;">
          <el-option label="全球" value="global" />
          <el-option label="韩服" value="kr" />
          <el-option label="欧服" value="euw" />
          <el-option label="美服" value="na" />
        </el-select>

        <!-- 添加段位选择 -->
        <el-select 
          v-model="selectedTier" 
          placeholder="选择段位" 
          @change="handleFilterChange"
          size="small"
          style="width: 120px;">
          <el-option label="全部" value="all" />
          <el-option label="青铜" value="bronze" />
          <el-option label="白银" value="silver" />
          <el-option label="黄金" value="gold" />
          <el-option label="黄金及以上" value="gold_plus" />
          <el-option label="铂金" value="platinum" />
          <el-option label="铂金及以上" value="platinum_plus" />
          <el-option label="钻石" value="diamond" />
          <el-option label="钻石及以上" value="diamond_plus" />
          <el-option label="大师" value="master" />
          <el-option label="大师及以上" value="master_plus" />
          <el-option label="宗师" value="grandmaster" />
          <el-option label="王者" value="challenger" />
        </el-select>

        <!-- 修改位置选择器,ARAM模式下禁用并显示无分路 -->
        <el-radio-group 
          v-model="selectedPosition" 
          @change="handleFilterChange"
          size="small"
          :disabled="selectedMode === 'aram'">
          <el-radio-button 
            v-if="selectedMode === 'aram'"
            label="none">
            无分路
          </el-radio-button>
          <template v-else>
            <el-radio-button 
              v-for="position in availablePositions" 
              :key="position" 
              :label="position">
              {{ getPositionLabel(position) }}
            </el-radio-button>
          </template>
        </el-radio-group>
      </div>
    </div>

    <!-- 基本信息部分 -->
    <div class="summary-section">
      <div class="champion-basic-info">
        <img :src="getResourceUrl('champion_icons', championDetail?.summary?.championId)" class="champion-avatar">
        <div class="champion-stats">
          <h2>{{ championDetail?.summary?.name }}</h2>
          <div class="stats-grid">
            <div class="stat-item">
              <span class="label">胜率</span>
              <span class="value">{{ formatPercent(championDetail?.summary?.winRate) }}</span>
            </div>
            <div class="stat-item">
              <span class="label">登场率</span>
              <span class="value">{{ formatPercent(championDetail?.summary?.pickRate) }}</span>
            </div>
            <div class="stat-item">
              <span class="label">禁用率</span>
              <span class="value">{{ formatPercent(championDetail?.summary?.banRate) }}</span>
            </div>
            <div class="stat-item">
              <span class="label">KDA</span>
              <span class="value">{{ championDetail?.summary?.kda?.toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加版本和模式信息 -->
      <div class="version-info">
        <span>版本: {{ version }}</span>
        <span>模式: {{ getModeLabel(mode) }}</span>
      </div>
    </div>

    <!-- 1. 符文部分 -->
    <div class="section">
      <div class="section-header">
        <h3>符文配置</h3>
        <el-button 
          type="primary" 
          size="small"
          :disabled="selectedRuneIndex === null"
          @click="applyRunes">
          应用符文
        </el-button>
      </div>
      <div class="runes-container">
        <div v-for="(rune, index) in championDetail?.perks"
             :key="index"
             :class="['rune-set', { 'selected': selectedRuneIndex === index }]"
             @click="selectedRuneIndex = index">
          <div class="rune-trees">
            <img :src="getResourceUrl('perk_icons', rune.primaryId)" class="tree-icon">
            <img :src="getResourceUrl('perk_icons', rune.secondaryId)" class="tree-icon">
          </div>
          <div class="rune-icons">
            <img v-for="icon in rune.icons"
                 :key="icon"
                 :src="getResourceUrl('perk_icons', icon)"
                 class="rune-icon">
          </div>
          <div class="rune-stats">
            <span>胜率: {{ (rune.win / rune.play * 100).toFixed(1) }}%</span>
            <span>使用率: {{ (rune.pickRate * 100).toFixed(1) }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 2. 出装部分 -->
    <div class="section">
      <div class="section-header">
        <div class="title-with-controls">
          <h3>推荐出装</h3>
          <el-button 
            type="primary" 
            size="small"
            @click="toggleAllItems">
            {{ isAllSelected ? '取消全选' : '全选' }}
          </el-button>
        </div>
        <el-button 
          type="primary" 
          size="small"
          :disabled="!hasValidItemSelection"
          @click="applyItems">
          应用出装
        </el-button>
      </div>
      
      <div class="items-container">
        <!-- 起始装备 -->
        <div class="item-group" v-if="championDetail?.items?.startItems?.length">
          <div class="group-header">
            <div class="title-with-controls">
              <h4>起始装备</h4>
              <el-button 
                type="primary" 
                size="small"
                @click="toggleGroupSelection('start')">
                {{ isGroupAllSelected('start') ? '取消全选' : '全选' }}
              </el-button>
            </div>
          </div>
          <div v-for="(build, index) in championDetail?.items?.startItems"
               :key="index"
               :class="['build-row', { selected: selectedStartItems.includes(index) }]"
               @click="toggleItemSelection(index, 'start')">
            <div class="item-icons">
              <img v-for="icon in build.icons"
                   :key="icon"
                   :src="getResourceUrl('item_icons', icon)"
                   class="item-icon">
            </div>
            <div class="build-stats">
              <span>胜率: {{ (build.win / build.play * 100).toFixed(1) }}%</span>
              <span>使用率: {{ (build.pickRate * 100).toFixed(1) }}%</span>
            </div>
          </div>
        </div>

        <!-- 鞋子选择 -->
        <div class="item-group" v-if="championDetail?.items?.boots?.length">
          <div class="group-header">
            <div class="title-with-controls">
              <h4>鞋子选择</h4>
              <el-button 
                type="primary" 
                size="small"
                @click="toggleGroupSelection('boots')">
                {{ isGroupAllSelected('boots') ? '取消全选' : '全选' }}
              </el-button>
            </div>
          </div>
          <div v-for="(build, index) in championDetail?.items?.boots"
               :key="index"
               :class="['build-row', { selected: selectedBoots.includes(index) }]"
               @click="toggleItemSelection(index, 'boots')">
            <div class="item-icons">
              <img v-for="icon in build.icons"
                   :key="icon"
                   :src="getResourceUrl('item_icons', icon)"
                   class="item-icon">
            </div>
            <div class="build-stats">
              <span>胜率: {{ (build.win / build.play * 100).toFixed(1) }}%</span>
              <span>使用率: {{ (build.pickRate * 100).toFixed(1) }}%</span>
            </div>
          </div>
        </div>

        <!-- 核心装备 -->
        <div class="item-group" v-if="championDetail?.items?.coreItems?.length">
          <div class="group-header">
            <div class="title-with-controls">
              <h4>核心装备</h4>
              <el-button 
                type="primary" 
                size="small"
                @click="toggleGroupSelection('core')">
                {{ isGroupAllSelected('core') ? '取消全选' : '全选' }}
              </el-button>
            </div>
          </div>
          <div v-for="(build, index) in championDetail?.items?.coreItems"
               :key="index"
               :class="['build-row', { selected: selectedCoreItems.includes(index) }]"
               @click="toggleItemSelection(index, 'core')">
            <div class="item-icons">
              <img v-for="icon in build.icons"
                   :key="icon"
                   :src="getResourceUrl('item_icons', icon)"
                   class="item-icon">
            </div>
            <div class="build-stats">
              <span>胜率: {{ (build.win / build.play * 100).toFixed(1) }}%</span>
              <span>使用率: {{ (build.pickRate * 100).toFixed(1) }}%</span>
            </div>
          </div>
        </div>

        <!-- 可选装备池 -->
        <div class="item-group" v-if="championDetail?.items?.lastItems?.length">
          <h4>可选装备池</h4>
          <div class="build-row selected">
            <div class="last-items-grid">
              <div v-for="itemId in championDetail?.items?.lastItems"
                   :key="itemId"
                   class="last-item">
                <img :src="getResourceUrl('item_icons', itemId)"
                     class="item-icon"
                     :title="itemId">
              </div>
            </div>
            <div class="build-stats">
              <span>推荐后期装备选择</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 3. 唤师技能部分 -->
    <div class="section">
      <h3>召唤师技能</h3>
      <div class="summoner-spells">
        <div v-for="(spell, index) in championDetail?.summonerSpells" 
             :key="index"
             class="spell-group">
          <div class="spell-icons">
            <img v-for="icon in spell.icons" 
                 :key="icon"
                 :src="getResourceUrl('summoner_spell_icons', icon)"
                 class="spell-icon">
          </div>
          <div class="spell-stats">
            <span>胜率: {{ (spell.win / spell.play * 100).toFixed(1) }}%</span>
            <span>使用率: {{ (spell.pickRate * 100).toFixed(1) }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 4. 技能加点部分 -->
    <div class="section">
      <h3>技能加点</h3>
      <div class="skill-order" v-if="championDetail?.championSkills">
        <!-- 主系技能 -->
        <div class="skill-masteries">
          <h4>主系技能</h4>
          <div class="mastery-sequence">
            <div v-for="(skill, index) in championDetail.championSkills.masteries" 
                 :key="index"
                 class="mastery-item">
              {{ skill }}
            </div>
          </div>
        </div>
        
        <!-- 详细点顺序 -->
        <div class="skill-sequence-container">
          <h4>加点顺序</h4>
          <div class="skill-sequence">
            <div v-for="(skill, index) in championDetail.championSkills.order" 
                 :key="index"
                 class="skill-item">
              {{ skill }}
            </div>
          </div>
          <div class="skill-stats">
            <span>胜率: {{ (championDetail.championSkills.win / championDetail.championSkills.play * 100).toFixed(1) }}%</span>
            <span>使用率: {{ (championDetail.championSkills.pickRate * 100).toFixed(1) }}%</span>
            <span>场次: {{ championDetail.championSkills.play }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 5. 克制关系部分 -->
    <div class="section" v-if="hasCounters">
      <h3>英雄克制</h3>
      <div class="counters-container">
        <!-- 强势对 -->
        <div class="counter-group strong" v-if="championDetail?.counters?.strongAgainst?.length">
          <h4>强势对线</h4>
          <div class="counter-list">
            <div v-for="champion in championDetail?.counters?.strongAgainst"
                 :key="champion.championId"
                 class="counter-item"
                 @click="$emit('champion-click', champion.championId, champion.name)">
              <img :src="getResourceUrl('champion_icons', champion.championId)" 
                   class="counter-icon"
                   :title="champion.name">
              <div class="counter-info">
                <span class="champion-name">{{ champion.name }}</span>
                <span class="win-rate" :class="{ win: champion.winRate > 0.5, lose: champion.winRate < 0.5 }">
                  胜率 {{ (champion.winRate * 100).toFixed(1) }}%
                </span>
                <span class="play-count">{{ champion.play }}场</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 劣势对线 -->
        <div class="counter-group weak" v-if="championDetail?.counters?.weakAgainst?.length">
          <h4>劣势对线</h4>
          <div class="counter-list">
            <div v-for="champion in championDetail?.counters?.weakAgainst"
                 :key="champion.championId"
                 class="counter-item"
                 @click="$emit('champion-click', champion.championId, champion.name)">
              <img :src="getResourceUrl('champion_icons', champion.championId)" 
                   class="counter-icon"
                   :title="champion.name">
              <div class="counter-info">
                <span class="champion-name">{{ champion.name }}</span>
                <span class="win-rate" :class="{ win: champion.winRate > 0.5, lose: champion.winRate < 0.5 }">
                  胜率 {{ (champion.winRate * 100).toFixed(1) }}%
                </span>
                <span class="play-count">{{ champion.play }}场</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowUpBold } from '@element-plus/icons-vue'

const props = defineProps<{
  championId: number,
  initialPosition?: string,
  initialTier?: string,
  initialRegion?: string,
  mode?: string
}>()

const championDetail = ref<any>(null)
const gameResources = ref<any>({})
const version = ref<string>('')
const mode = ref<string>('')

// 选中的符文页索引
const selectedRuneIndex = ref<number>(0)

// 添加段位状态
const selectedTier = ref(props.initialTier || 'platinum_plus')
const selectedPosition = ref(props.initialPosition || 'TOP')

// 添加服务器状态
const selectedRegion = ref(props.initialRegion || 'kr')

// 添加可用位置状态
const availablePositions = ref<string[]>([])

// 添加模式状态
const selectedMode = ref(props.mode || 'ranked')

// 添加模式标签映射
const modeLabels: Record<string, string> = {
  ranked: '单双排位',
  aram: '极地大乱斗'
}

// 获取模式显示标签
const getModeLabel = (mode: string) => {
  return modeLabels[mode] || mode
}

// 添加位置标映射,添加无分路
const positionLabels: Record<string, string> = {
  TOP: '上路',
  JUNGLE: '打野', 
  MID: '中路',
  ADC: '下路',
  SUPPORT: '辅助',
  none: '无分路' // 添加无分路标签
}

// 获取位置显示标签
const getPositionLabel = (position: string) => {
  return positionLabels[position] || position
}

// 修改应用出装方法
const applyItems = async () => {
  try {
    if (!championDetail.value?.items) {
      ElMessage.warning('装备数据不完整')
      return
    }

    // 准备装备数据
    const itemsData = {
      title: championDetail.value.summary.name,
      source: selectedRegion.value,
      tier: selectedTier.value,
      mode: selectedMode.value,
      position: selectedMode.value === 'aram' ? 'none' : selectedPosition.value,
      associatedChampions: [props.championId],
      associatedMaps: [selectedMode.value === 'aram' ? 12 : 11],
      items: {
        startItems: selectedStartItems.value.map(index => ({
          icons: championDetail.value.items.startItems[index].icons,
          winRate: (championDetail.value.items.startItems[index].win / championDetail.value.items.startItems[index].play * 100).toFixed(1),
          pickRate: (championDetail.value.items.startItems[index].pickRate * 100).toFixed(1)
        })),
        boots: selectedBoots.value.map(index => ({
          icons: championDetail.value.items.boots[index].icons,
          winRate: (championDetail.value.items.boots[index].win / championDetail.value.items.boots[index].play * 100).toFixed(1),
          pickRate: (championDetail.value.items.boots[index].pickRate * 100).toFixed(1)
        })),
        coreItems: selectedCoreItems.value.map(index => ({
          icons: championDetail.value.items.coreItems[index].icons,
          winRate: (championDetail.value.items.coreItems[index].win / championDetail.value.items.coreItems[index].play * 100).toFixed(1),
          pickRate: (championDetail.value.items.coreItems[index].pickRate * 100).toFixed(1)
        })),
        lastItems: championDetail.value.items.lastItems
      }
    }

    // 调用应用装备接口
    const response = await axios.post('/api/match_data/perks_and_items/apply_items', itemsData)
    
    // 使用返回的消息
    if (response.data.success) {
      ElMessage.success(response.data.message || '出装应用成功')
    } else {
      ElMessage.error(response.data.message || '出装应用失败')
    }
  } catch (error: any) {
    console.error('应用出装失败:', error)
    ElMessage.error(error.response?.data?.detail || '应用出装失败')
  }
}

// 修改应用符文的方法
const applyRunes = async () => {
  try {
    const selectedRune = championDetail.value.perks[selectedRuneIndex.value]
    const winRate = (selectedRune.win / selectedRune.play * 100).toFixed(1)
    const pickRate = (selectedRune.pickRate * 100).toFixed(1)
    
    const perksData = {
      name: `${championDetail.value.summary.name}|胜率${winRate}%|使用率${pickRate}%(Best Wishes From Mousy🐹)`,
      primary_style_id: selectedRune.primaryId,
      sub_style_id: selectedRune.secondaryId,
      selected_perk_ids: selectedRune.perks
    }

    const response = await axios.post('/api/match_data/perks_and_items/apply_perks', perksData)
    
    // 使用返回的消息
    if (response.data.success) {
      ElMessage.success(response.data.message || '符文应用成功')
    } else {
      ElMessage.error(response.data.message || '符文应用失败')
    }
  } catch (error: any) {
    console.error('应用符文失败:', error)
    ElMessage.error(error.response?.data?.detail || '应用符文失败')
  }
}

// 格式化百分比
const formatPercent = (value: number) => {
  return value ? `${(value * 100).toFixed(1)}%` : '0%'
}

// 获资源URL
const getResourceUrl = (type: string, id: number): string => {
  const typeMapping: Record<string, string> = {
    'champion_icons': 'champion_icons',
    'summoner_spell_icons': 'spell_icons',
    'item_icons': 'item_icons',
    'perk_icons': 'rune_icons'
  }

  const backendType = typeMapping[type]
  const resources = gameResources.value[backendType]
  if (resources?.[id]) {
    return `data:image/png;base64,${resources[id]}`
  }
  return '/placeholder.png'
}

// 加载游戏资
const loadGameResources = async () => {
  try {
    // 确保 championDetail 存在且有效
    if (!championDetail.value) {
      return
    }

    const resourceRequest = {
      champion_icons: [props.championId] as number[],
      spell_icons: [] as number[],
      item_icons: [] as number[],
      rune_icons: [] as number[]
    }
    
    // 收集所需的资源ID
    if (championDetail.value) {
      // 添加克制关系雄图标
      championDetail.value.counters?.strongAgainst?.forEach((champion: any) => {
        if (!resourceRequest.champion_icons.includes(champion.championId)) {
          resourceRequest.champion_icons.push(champion.championId)
        }
      })
      
      championDetail.value.counters?.weakAgainst?.forEach((champion: any) => {
        if (!resourceRequest.champion_icons.includes(champion.championId)) {
          resourceRequest.champion_icons.push(champion.championId)
        }
      })

      // 添加召唤师技图标
      championDetail.value.summonerSpells?.forEach((spell: any) => {
        spell.icons.forEach((id: number) => {
          if (!resourceRequest.spell_icons.includes(id)) {
            resourceRequest.spell_icons.push(id)
          }
        })
      })

      // 添加备图标
      const items = championDetail.value.items
      ;['startItems', 'coreItems', 'boots'].forEach((category) => {
        items[category]?.forEach((build: any) => {
          build.icons.forEach((id: number) => {
            if (!resourceRequest.item_icons.includes(id)) {
              resourceRequest.item_icons.push(id)
            }
          })
        })
      })

      // 添加 lastItems 的图标收集
      items.lastItems?.forEach((itemId: number) => {
        if (!resourceRequest.item_icons.includes(itemId)) {
          resourceRequest.item_icons.push(itemId)
        }
      })

      // 添加符文图标
      championDetail.value.perks?.forEach((perk: any) => {
        ;[perk.primaryId, perk.secondaryId, ...perk.icons].forEach((id: number) => {
          if (!resourceRequest.rune_icons.includes(id)) {
            resourceRequest.rune_icons.push(id)
          }
        })
      })
    }

    const response = await axios.post('/api/common/game_resource/batch_get_resources', resourceRequest)
    // 清空旧资源后再设置新资源
    gameResources.value = {}
    gameResources.value = response.data
  } catch (error) {
    console.error('加载游戏资源失败:', error)
    ElMessage.error('加载游戏资源失败')
  }
}

// 添加数据加载状态
const isLoading = ref(false)

// 获取英雄详细数据
const fetchChampionDetail = async () => {
  try {
    isLoading.value = true
    selectedRuneIndex.value = 0
    championDetail.value = null
    gameResources.value = {}
    
    const params = new URLSearchParams({
      champion_id: props.championId.toString(),
      region: selectedRegion.value,
      mode: selectedMode.value,
      position: selectedMode.value === 'aram' ? 'none' : selectedPosition.value,
      tier: selectedTier.value
    })

    const response = await axios.post(
      '/api/match_data/champion_ranking_data/champion_build',
      params,
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )

    championDetail.value = response.data.data
    version.value = response.data.version
    mode.value = response.data.mode
    await loadGameResources()
  } catch (error) {
    ElMessage.error('获取英雄详情失败')
    console.error('获取英雄详情失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 获取英雄可用位置
const fetchAvailablePositions = async () => {
  try {
    isLoading.value = true
    selectedRuneIndex.value = 0
    championDetail.value = null
    
    if (selectedMode.value === 'aram') {
      availablePositions.value = ['none']
      selectedPosition.value = 'none'
      await fetchChampionDetail()
      return
    }

    const params = new URLSearchParams({
      champion_id: props.championId.toString(),
      region: selectedRegion.value,
      tier: selectedTier.value
    })

    const response = await axios.post(
      '/api/match_data/champion_ranking_data/champion_positions',
      params,
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )

    availablePositions.value = response.data
    
    if (!availablePositions.value.includes(selectedPosition.value)) {
      selectedPosition.value = availablePositions.value[0]
    }
    
    await fetchChampionDetail()
  } catch (error) {
    console.error('获取英雄可用位置失败:', error)
    ElMessage.error('获取英雄可用位置失败')
  } finally {
    isLoading.value = false
  }
}

// 统一的筛选条件变更处理函数
const handleFilterChange = async () => {
  // 如果切换到 ARAM 模式，设置为无分路
  if (selectedMode.value === 'aram') {
    selectedPosition.value = 'none'
  } else if (selectedPosition.value === 'none') {
    // 如果从 ARAM 切换到其他模式，设置默认位置
    selectedPosition.value = availablePositions.value[0] || 'TOP'
  }

  // 发出位置变更事件
  emit('position-change', selectedPosition.value)
  
  // 重新获取数据
  await fetchChampionDetail()
}

// 监听 championId 变化
watch(() => props.championId, () => {
  fetchAvailablePositions()
})

// 监听模式变化
watch(selectedMode, (newMode) => {
  if (newMode === 'aram') {
    // ARAM 模式下设置为无分路
    selectedPosition.value = 'none'
  } else {
    // 切换回普通模式时重新获取可用位置
    fetchAvailablePositions()
  }
})

// 监听服务器和段位变化
watch([selectedRegion, selectedTier], () => {
  if (selectedMode.value === 'aram') {
    // ARAM 模式下直接获取数据
    fetchChampionDetail()
  } else {
    // 其他模式重新获取可用位置
    fetchAvailablePositions()
  }
})

onMounted(() => {
  fetchAvailablePositions()
})

// 新 emit 定义
const emit = defineEmits<{
  back: []
  'champion-click': [championId: number, name: string]
  'position-change': [position: string]
}>()

// 在 script setup 部分添加计算属性
const hasCounters = computed(() => {
  return (championDetail.value?.counters?.strongAgainst?.length > 0 || 
          championDetail.value?.counters?.weakAgainst?.length > 0)
})

// 修改选择状态为数组
const selectedStartItems = ref<number[]>([0]) // 默认选第一个起始装备
const selectedBoots = ref<number[]>([0]) // 默认选择第一个鞋子
const selectedCoreItems = ref<number[]>([0]) // 默认选择第一个核心装备

// 统一的装备选择切换方法
const toggleItemSelection = (index: number, type: 'start' | 'boots' | 'core') => {
  const selectionMap = {
    'start': selectedStartItems,
    'boots': selectedBoots,
    'core': selectedCoreItems
  }
  
  const selection = selectionMap[type]
  const currentIndex = selection.value.indexOf(index)
  
  if (currentIndex === -1) {
    // 如果未选中，则添加
    selection.value.push(index)
  } else {
    // 如果已选中且不是最后一个选中项，移除
    if (selection.value.length > 1) {
      selection.value.splice(currentIndex, 1)
    }
  }
}

// 修改检查是否有有效的装备选择
const hasValidItemSelection = computed(() => {
  const items = championDetail.value?.items
  if (!items) return false
  
  // 检查每个装备组是否有数据，如果有数据则必须有选中项
  const hasValidStart = !items.startItems?.length || selectedStartItems.value.length > 0
  const hasValidBoots = !items.boots?.length || selectedBoots.value.length > 0
  const hasValidCore = !items.coreItems?.length || selectedCoreItems.value.length > 0
  
  // 至少要有一个装备组有数据且被选中
  const hasAnySelection = (items.startItems?.length && selectedStartItems.value.length > 0) ||
                         (items.boots?.length && selectedBoots.value.length > 0) ||
                         (items.coreItems?.length && selectedCoreItems.value.length > 0)
  
  return hasValidStart && hasValidBoots && hasValidCore && hasAnySelection
})

// 检查某个组是否全选
const isGroupAllSelected = (type: 'start' | 'boots' | 'core') => {
  const selectionMap = {
    'start': selectedStartItems,
    'boots': selectedBoots,
    'core': selectedCoreItems
  }
  
  const selection = selectionMap[type]
  const itemsCount = type === 'start' 
    ? championDetail.value?.items?.startItems?.length 
    : type === 'boots'
    ? championDetail.value?.items?.boots?.length
    : championDetail.value?.items?.coreItems?.length

  return selection.value.length === itemsCount
}

// 切换某个组的全选状态
const toggleGroupSelection = (type: 'start' | 'boots' | 'core') => {
  const selectionMap = {
    'start': selectedStartItems,
    'boots': selectedBoots,
    'core': selectedCoreItems
  }
  
  const selection = selectionMap[type]
  const itemsCount = type === 'start' 
    ? championDetail.value?.items?.startItems?.length 
    : type === 'boots'
    ? championDetail.value?.items?.boots?.length
    : championDetail.value?.items?.coreItems?.length

  if (isGroupAllSelected(type)) {
    // 如果已全选，则只保留第一个选中项
    selection.value = [0]
  } else {
    // 如果未全选，则选中所有项
    selection.value = Array.from({ length: itemsCount }, (_, i) => i)
  }
}

// 检查是否所有组都全选了
const isAllSelected = computed(() => {
  return isGroupAllSelected('start') && 
         isGroupAllSelected('boots') && 
         isGroupAllSelected('core')
})

// 切换所有组的全选状态
const toggleAllItems = () => {
  if (isAllSelected.value) {
    // 如果已全选，则每组只保留第一个选中项
    selectedStartItems.value = [0]
    selectedBoots.value = [0]
    selectedCoreItems.value = [0]
  } else {
    // 如果未全选，则选中所有项
    selectedStartItems.value = Array.from(
      { length: championDetail.value?.items?.startItems?.length || 0 }, 
      (_, i) => i
    )
    selectedBoots.value = Array.from(
      { length: championDetail.value?.items?.boots?.length || 0 }, 
      (_, i) => i
    )
    selectedCoreItems.value = Array.from(
      { length: championDetail.value?.items?.coreItems?.length || 0 }, 
      (_, i) => i
    )
  }
}
</script>

<style scoped>
.champion-detail {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.section {
  margin-bottom: 30px;
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--el-box-shadow-lighter);
}

.summary-section {
  margin-bottom: 30px;
}

.champion-basic-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.champion-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.value {
  font-size: 16px;
  font-weight: bold;
}

/* 召唤师技能样式 */
.summoner-spells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.spell-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spell-icons {
  display: flex;
  gap: 5px;
}

.spell-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

/* 能加点样式 */
.skill-sequence {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.skill-item {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-9);
  border-radius: 4px;
  font-weight: bold;
}

/* 装备样式 */
.items-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.item-group {
  margin-bottom: 20px;
}

.build-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.item-icons {
  display: flex;
  gap: 5px;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

/* 符文样式 */
.runes-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.rune-set {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rune-trees {
  display: flex;
  gap: 10px;
}

.tree-icon {
  width: 40px;
  height: 40px;
}

.rune-icons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.rune-icon {
  width: 30px;
  height: 30px;
}

/* 通用统计信息样式 */
.build-stats,
.spell-stats,
.skill-stats,
.rune-stats {
  display: flex;
  gap: 15px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

/* 克制关系样式 */
.counters-container {
  display: flex;
  gap: 30px;
}

.counter-group {
  flex: 1;
}

.counter-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

.counter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--el-bg-color-page);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.counter-item:hover {
  transform: translateX(5px);
  background-color: var(--el-color-primary-light-9);
}

.counter-group.strong .counter-item:hover {
  background-color: var(--el-color-success-light-8);
}

.counter-group.weak .counter-item:hover {
  background-color: var(--el-color-danger-light-8);
}

.counter-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.counter-info {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 3fr 1.9fr;
  align-items: center;
}

.champion-name {
  font-weight: bold;
  font-size: 14px;
  padding-left: 1px;
}

.win-rate {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  text-align: right;
  padding-right: 20px;
}

.play-count {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  text-align: left;
  padding-left: 20px;
}

.win-rate.win {
  color: var(--el-color-success);
}

.win-rate.lose {
  color: var(--el-color-danger);
}

/* 技能加点样式补充 */
.skill-masteries {
  margin-bottom: 20px;
}

.mastery-sequence {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.mastery-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-8);
  border-radius: 4px;
  font-weight: bold;
  font-size: 18px;
}

.skill-sequence-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 美化滚动条 */
.counter-list::-webkit-scrollbar {
  width: 6px;
}

.counter-list::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-darker);
  border-radius: 3px;
}

.counter-list::-webkit-scrollbar-track {
  background-color: var(--el-border-color-light);
  border-radius: 3px;
}

/* 响应式布局调 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .runes-container,
  .summoner-spells {
    grid-template-columns: 1fr;
  }
  
  .counter-list {
    max-height: 300px;
  }
}

/* 最终装备列表样式 */
.last-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(40px, 1fr));
  gap: 10px;
  padding: 10px;
}

@media (min-width: 768px) {
  .last-items-grid {
    grid-template-columns: repeat(6, minmax(40px, 1fr));
  }
}

@media (min-width: 1024px) {
  .last-items-grid {
    grid-template-columns: repeat(8, minmax(40px, 1fr));
  }
}

.last-item .item-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.build-row {
  padding: 10px 15px;
}

.build-row .build-stats {
  margin-top: 5px;
  padding-top: 5px;
}

.version-info {
  margin-top: 10px;
  display: flex;
  gap: 20px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rune-set {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}

.rune-set:hover {
  background: var(--el-color-primary-light-9);
}

.rune-set.selected {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

/* 添加返回按钮容器样式 */
.back-button-container {
  margin-bottom: 20px;
}

/* 克制关系样式更新 */
.counter-group.strong .counter-item {
  background: var(--el-color-success-light-9);
  border-left: 4px solid var(--el-color-success);
}

.counter-group.weak .counter-item {
  background: var(--el-color-danger-light-9);
  border-left: 4px solid var(--el-color-danger);
}

.counter-item {
  margin-bottom: 10px;
  transition: transform 0.2s ease;
}

.counter-item:hover {
  transform: translateX(5px);
}

.win-rate.win {
  color: var(--el-color-success);
  font-weight: bold;
}

.win-rate.lose {
  color: var(--el-color-danger);
  font-weight: bold;
}

.counter-group h4 {
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-border-color-light);
}

.counter-group.strong h4 {
  color: var(--el-color-success);
}

.counter-group.weak h4 {
  color: var(--el-color-danger);
}

/* 添加回到顶部按钮样式 */
:deep(.el-backtop) {
  background-color: var(--el-color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

:deep(.el-backtop:hover) {
  background-color: var(--el-color-primary-light-3);
}

/* 更新头部控制区域样式 */
.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-lighter);
}

.left-controls {
  display: flex;
  align-items: center;
}

.right-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* 调整选择器样式 */
:deep(.el-select) {
  margin-right: 10px;
}

:deep(.el-radio-group) {
  margin-left: 10px;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .header-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .right-controls {
    flex-direction: column;
    width: 100%;
  }
  
  :deep(.el-select) {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  :deep(.el-radio-group) {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: space-between;
  }
}

/* 添加禁用状态的样式 */
:deep(.el-radio-group.is-disabled),
:deep(.el-radio-button.is-disabled),
:deep(.el-radio-button__inner) {
  cursor: default;
}

/* 更新位置选择器样式 */
:deep(.el-radio-button__inner) {
  cursor: pointer; /* 可选状态显示手指 */
}

/* 禁用状态样式 */
:deep(.el-radio-group.is-disabled),
:deep(.el-radio-button.is-disabled),
:deep(.el-radio-button__inner.is-disabled) {
  cursor: not-allowed !important; /* 禁用状态显示禁止符号 */
}

/* 在 style 部分添加 */
.build-row {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}

.build-row:hover {
  background: var(--el-color-primary-light-9);
}

.build-row.selected {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.item-group {
  position: relative;
}

.item-group h4 {
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-border-color-light);
}

/* 添加组标题样式 */
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-border-color-light);
}

.group-header h4 {
  margin: 0;
  padding: 0;
  border: none;
}

/* 调整按钮样式 */
.header-controls {
  display: flex;
  align-items: center;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .group-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .group-header h4 {
    margin-bottom: 10px;
  }
}

/* 更新标题和按钮布局样式 */
.title-with-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-with-controls h3,
.title-with-controls h4 {
  margin: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-border-color-light);
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .section-header,
  .group-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .title-with-controls {
    width: 100%;
    justify-content: space-between;
  }
}
</style>